<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火车搜索结果-粤亮旅游网</title>

    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/train-search.css">
    <script src="../js/jquery-3.3.1.js"></script>
    <!-- 引入字体图标 -->
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?rghiog');
            src: url('fonts/icomoon.eot?rghiog#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?rghiog') format('truetype'),
            url('fonts/icomoon.woff?rghiog') format('woff'),
            url('fonts/icomoon.svg?rghiog#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>

</head>

<body>
<!-- 快捷导航栏开始 -->
<section class="shortcut">
    <div class="top-bgc">
        欢迎来到粤亮旅游网!
    </div>
    <div class="w">
        <div class="mine">
            <ul>
                <li class="fl">
                    <a href="collect.html">我的收藏</a>
                    &nbsp;&nbsp;&nbsp;
                    <a href="orders.html">我的订单</a>
                    &nbsp;&nbsp;&nbsp;
                    <a href="#" class="logout">退出</a>
                </li>
            </ul>
        </div>

    </div>
</section>
<!-- 核心内容部分 -->
<div class="box w">
    <div class="content">
        <div class="address">
            <div class="start addr">
                <span>出发城市</span>
                <input type="text" class="start-address">
            </div>
            <div class="change"></div>
            <div class="end addr">
                <span>到达城市</span>
                <input type="text" class="end-address">
            </div>
        </div>
        <div class="departure-date">
            <span>出发日期</span>
            <input type="date" id="date" class="date">
            <div id="week"></div>
        </div>

        <button class="search-btn">
            搜索
        </button>

        <div class="tit">搜索结果</div>
        <div class="routes">

        </div>
    </div>
</div>


<footer class="footer">
    <div class="w">
        <div class="mod_service">
            <ul>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>价格保证</h4>
                        <p>同类产品,保证低价</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>退订保障</h4>
                        <p>因特殊情况影响出行,保证退订</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>救援保障</h4>
                        <p>旅途中意外情况,保证援助</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>贴心服务</h4>
                        <p>快速响应,全年无休</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="mod_help">
            <dl>
                <dt>关于我们</dt>
                <dd><a href="#">粤亮简介</a></dd>
                <dd><a href="#">旅游度假资质</a></dd>
                <dd><a href="#">网络地图</a></dd>
                <dd><a href="#">诚聘英才</a></dd>
                <dd><a href="#">知识产权声明</a></dd>
                <dd><a href="#">用户协议</a></dd>
            </dl>
            <dl>
                <dt>加盟合作</dt>
                <dd><a href="#">团购预约</a></dd>
                <dd><a href="#">分销系统</a></dd>
                <dd><a href="#">平台开放</a></dd>
                <dd><a href="#">供应商结盟合作</a></dd>
            </dl>
            <dl>
                <dt>联系我们</dt>
                <dd><a href="#">门店信息</a></dd>
                <dd><a href="#">意见反馈</a></dd>
                <dd><a href="#">不良信息处置方法</a></dd>

            </dl>
            <dl>
                <dt>订购指南</dt>
                <dd><a href="#">门票使用</a></dd>
                <dd><a href="#">常见问题</a></dd>
            </dl>

            <dl>
                <dt>售后服务</dt>
                <dd><a href="#">退货说明</a></dd>
                <dd><a href="#">投诉建议</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>
                    <img src="../images/了解更多.png" alt="">
                    粤亮客户端
                </dd>
            </dl>
        </div>
        <div class="mod_copyright">
            <div class="links">
                <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机粤亮 | 友情链接 | 销售联盟 | 粤亮社区 |
                品优购公益 | English Site | Contact U
            </div>
            <div class="copyright">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                京ICP备08001421号京公网安备110108007702
            </div>
        </div>
    </div>
</footer>
<script src="../js/train.js"></script>
<script>
    function reserveTrain(ticketId){
        const result = confirm("确定预订火车票吗")
        if (result){
            // 发送 Ajax 请求
            $.ajax({
                url: `/ticket/reserve/${ticketId}`,
                type: "GET",
                contentType: "application/json",
                success: function (response) {
                    // 处理响应
                    if (response.success === 1) {
                        alert("预订成功")
                    }else if (response.success === 0){
                        alert(response.msg);
                    }
                },
                error: function () {
                    alert("请求失败");
                }
            })
        }
    }

    function sendRequestsAndRenderPages(requestData){
        // 发送 Ajax 请求
        $.ajax({
            url: "/ticket/search",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(requestData),
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    // alert("查询成功");
                    // 进行跳转或其他操作
                    const routes = document.querySelector('.box .content .routes')
                    let html = "";

                    if (response.data === null) {
                        html += `
                            <p style="text-align: center; color: #ccc;font-size: 24px">没有符合筛选条件的车次，换个条件试试吧!</p>
`
                    } else {
                        response.data.forEach(function (route) {
                            const timeRegex = /(\d{2}:\d{2})/;
                            const departureTime = route.departureTime.match(timeRegex)[1];
                            const arrivalTime = route.arrivalTime.match(timeRegex)[1];

                            let date1 = new Date(route.departureTime);
                            let date2 = new Date(route.arrivalTime);

                            let diffMs = date2 - date1;  // 相差的毫秒数
                            // 将毫秒数转化为时和分
                            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
                            const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));

                            html += `
          <div class="route">
            <div class="startpoint point">
              <div class="time">${departureTime}</div>
              <div class="station">${route.departureStation}</div>
            </div>
            <div class="prompt">
              <div class="take-time">全程${diffHours}时${diffMinutes}分</div>
              <div class="transit">汕尾转</div>
              <div class="transfer-time">换乘29分</div>
            </div>
            <div class="endpoint point">
              <div class="time">${arrivalTime}</div>
              <div class="station">${route.arrivalStation}</div>
            </div>
            <div class="money">¥${route.price}</div>
            <div class="ticket-condition">
              <span>D7114 二等座有票</span>
            </div>
            <div class="reservation" style="cursor: pointer" onclick="reserveTrain(${route.ticketId})">
              
            </div>
          </div>`
                        })
                    }

                    routes.innerHTML = html
                } else {
                    alert("查询失败");
                }
            },
            error: function () {
                alert("请求失败");
            }
        })
    }

    const btn = document.querySelector('.box .content .search-btn')
    btn.addEventListener('click',function (){
       const departureStation = document.querySelector('.box .content .address .start .start-address').value
       const arrivalStation = document.querySelector('.box .content .address .end .end-address').value
       const departureTime = document.querySelector('.box .content .departure-date .date').value

        const requestData = {
            departureStation: departureStation,
            arrivalStation: arrivalStation,
            departureTime: departureTime,
        }

        sendRequestsAndRenderPages(requestData)
    })

    window.addEventListener("DOMContentLoaded", function () {
        let requestData = localStorage.getItem('queryTickets');
        requestData = JSON.parse(requestData);

        document.querySelector('.box .content .address .start .start-address').value = requestData.departureStation
        document.querySelector('.box .content .address .end .end-address').value = requestData.arrivalStation
        document.querySelector('.box .content .departure-date .date').value = requestData.departureTime
        document.querySelector('.box .content .departure-date #week').innerHTML = requestData.week

        localStorage.removeItem('queryTickets')

        sendRequestsAndRenderPages(requestData)
    })

    const logout = document.querySelector('.logout')
    logout.addEventListener('click',function (){
        $.ajax({
            url: "/logout",
            type: "POST",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    alert("退出成功");
                    localStorage.removeItem('responseData');
                    localStorage.removeItem('hotelDetail')
                    localStorage.removeItem('cityData')
                    localStorage.removeItem('queryTickets')
                    // 进行跳转或其他操作
                    window.location.href = 'index.html'
                } else {
                    alert("退出失败");
                }
            },
            error: function () {
                alert("请求失败");
            }
        });
    })
</script>
</body>

</html>